<template>
    <div>
      <h1>toRef</h1>
      <h3>这obj中的name</h3>
      <h1>{{ obj.name }}</h1>
      <h3>这是ref包裹变为响应</h3>
      <h1>{{ name1 }}</h1>
      <h3>这个是toRef包裹变为响应式</h3>
      <h1>{{ name2 }}</h1>
      <button @click="changeName">更改name值</button>
    </div>
  </template>
  
  <script lang="ts">
  import { defineComponent, reactive, ref, toRef } from "vue";
  
  export default defineComponent({
    setup() {
      const obj = reactive({
        name: "tom",
        age: 10,
      });
  
      // 将name变为ref对象  当前name string 不是
      // ref得到的值是独立的是拷贝了一份新数据，在堆中是独立
      const name1 = ref(obj.name);
      console.log(name1);
      // toRef  能将响应式对象上的属性变为一个ref对象 参数一是响应对象  参数二：对象当中的key值（key永远是字符串）
      // toRef的值同源响应对象上的值是同一个空间，改动其中一个数据，另外一个也会改动。
      const name2 = toRef(obj, "name");
      console.log(name2);
  
      // 查看这两个ref对象有何区别？
      function changeName() {
        // 更改的是name1的值 ref
        // name1.value += "111";
        name2.value += "222";
      }
  
      return {
        obj,
        name1,
        name2,
        changeName,
      };
    },
  });
  
  /* 
  ref
  1. ref对象 将基本数据类型进行包裹，响应式数据
  2. ref获取DOM元素
  ref 获取单个DOM
  ref 获取子元素
  ref 获取 v-for遍历的DOM
  3. toRefs
  4. toRef
  5. customRef(明天讲)
  */
  </script>
  
  <style scoped>
  </style>